import React, { Component } from 'react'
import ReactEcharts from 'echarts-for-react'
export default class WeaderChart extends Component {
    state = {
        option: {}
    }

    componentDidMount() {
        const { hours } = this.props
        let xData = []
        let serieData = []
        hours.forEach(item => {
            xData.push(item.day)
            serieData.push(parseInt(item.tem))
        })
        let option = {
            backgroundColor: '',
            
            xAxis: {
                type: 'category',
                data: xData,
                axisTick: { show: false },
                axisLine: {show: false}
            },
            yAxis: {
                type: 'value',
                splitLine: { show: false },
                show: false,
            },
            series: [{
                data: serieData,
                type: 'line',
                itemStyle: { normal: { label: { show: true, formatter: (v) => { return v.data + '°C'; }}, color: '#399AE7' } },
                lineStyle: { normal: { color: "#399AE7"}}
            }]
        }
        this.setState({ option })
    }

    render() {
        const { option } = this.state
        return (
            <ReactEcharts option={option} style={{ height: '320px' }} />
        )
    }
}
